<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
		</view>
		<view class="sone">
			<view class="sonetxt">
				{{list.projectName}}
			</view>
			<view class="sonefoot">
				<view class="sftxt">
					创建时间：{{list.createTime}}
				</view>
				<view class="sftxt">
					项目位置：{{list.address}}
				</view>
				<view class="sftxt">
					小区总用户：{{list.totalUser}}
				</view>
				<view class="sftxt">
					当前使用用户：{{list.chargingUser}}
				</view>
				<view class="sfbtn">
					<view class="sfbtnone" @click="yjbtn">
						预警设置
					</view>
					<view class="sfbtnone" @click="modifybtn">
						修改信息
					</view>
					<view class="sfbtnone" @click="flbtn">
						费率设置
					</view>
				</view>
			</view>
		</view>
		<view class="show">

			<view class="stwo">
				<view class="stwohand">
					充值/优惠设置
				</view>
				<view class="cdjl-0" v-if="value">
					<view class="cdjl-0-l" @click="onShowDatePicker('range')">
						{{value[0]}}
					</view>-
					<view class="cdjl-0-l" @click="onShowDatePicker('range')">
						{{value[1]}}
					</view>
				</view>
				<view class="stwofoot">
					<view class="sftap">
						<view class="sftapleft">
							充<input type="number" v-model="first" v-input-limit='0' maxlength="6" />元
						</view>
						<view class="sftapleft">
							赠<input type="number" v-model="firstDiscount" v-input-limit='0' maxlength="6" />元
						</view>
					</view>
					<view class="sftap">
						<view class="sftapleft">
							充<input type="number" v-model="second" v-input-limit='0' maxlength="6" />元
						</view>
						<view class="sftapleft">
							赠<input type="number" v-model="secondDiscount" v-input-limit='0' maxlength="6" />元
						</view>
					</view>
					<view class="sftap">
						<view class="sftapleft">
							充<input type="number" v-model="third" v-input-limit='0' maxlength="6" />元
						</view>
						<view class="sftapleft">
							赠<input type="number" v-model="thirdDiscount" v-input-limit='0' maxlength="6" />元
						</view>
					</view>
					<view class="sftap">
						<view class="sftapleft">
							充<input type="number" v-model="fourth" v-input-limit='0' maxlength="6" />元
						</view>
						<view class="sftapleft">
							赠<input type="number" v-model="fourthDiscount" v-input-limit='0' maxlength="6" />元
						</view>
					</view>
					<view class="sfdibu">
						绑定赠送<input type="number" v-model="bindMoney" v-input-limit='0' maxlength="6" />元
					</view>
					<van-field name="switch" label="赠送金额是否允许跨小区使用" required>
						<template #input>
							<van-switch :checked="spanUse" size="20" @change="changeSpanUse" />
						</template>
					</van-field>
					
					<view class="sfbtn" @click="glupbtn">
						提交修改
					</view>
					<view class="cctap">

					</view>
					<view class="stwomap">
						<view class="stwomaphand">
							提示:
						</view>
						<view class="stwomaptxt">
							1.不选择时间段，用户将不享受优惠金额:<br />
							2.充值需要全部设置，不设置赠送填0;<br />
							3.不设置绑定小区赠送金额，填0即可;
						</view>
					</view>
				</view>
			</view>
			<view class="sfour">
				<view class="sfourhand">
					长充模式设置
				</view>
				<view class="sfant">
					<!-- <van-checkbox v-model="checked" shape="square">长充模式开关</van-checkbox> -->
					<van-switch :checked="checked" size="20px" @change='ccbtn' inactive-color='#f4f4f4' /><span
						style='margin-left: 20upx;'>长充模式</span>
				</view>
				<view class="sfourmap">
					<view class="sfourmaphand">
						提示:
					</view>

					<view class="sfourmaptxt">
						打开后，允许用户的充电界面中有“充满自停”时出现“长充模式”的选择。<br />（长充模式：当用户充满自停后将一直保持供电，此时段内的功率将按照充电器最大功率的比例换算成相应时长，不会多收用户的费用，旨在解决某些用户充不满的问题。）
					</view>
				</view>
			</view>
			<view class="sthree">
				<view class="sthreehand">
					运营商分成比例{{list.proportion}}
				</view>
				<view class="sthreez">
					<span>姓名</span>
					<span>编号</span>
					<span>修改</span>
					<span>删除</span>
				</view>
				<view class="sthreemap">
					<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
						<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadMore">
							<van-cell v-for="(item, index) in showlist" :key="index">
								<van-collapse v-model="activeNames" @change="cbtn" accordion v-if="showlist">
									<van-collapse-item :name=item.id>
										<template #title>
											<view class="tree">
												<view class="treeone1" v-if="item.id==activeNames">
													<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jian.png" />
												</view>
												<view class="treeone" v-if="item.id!=activeNames">
													<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jia.png" />
												</view>
												<view class="treetwo">{{item.userName}}</view>
												<view class="treethree">{{item.userId}}</view>
												<view class="treefour">
													<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//xupdate.png"
														@click="upbtn(item)" />
												</view>
												<view class="treefive">
													<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//xdelete.png"
														@click="dlbtn(item)" />
												</view>
											</view>
										</template>
										<view class="sthreeshow">
											<view class="mont">
												设备管理<view :class="item.deviceSettings=='1'?'monttap':'monttap1'"></view>
											</view>
											<view class="mont">
												运营统计<view :class="item.totalSetting=='1'?'monttap':'monttap1'"></view>
											</view>
											<view class="mont">
												注册用户<view :class="item.userSettings=='1'?'monttap':'monttap1'"></view>
											</view>
										</view>
									</van-collapse-item>
								</van-collapse>

							</van-cell>
						</van-list>
					</van-pull-refresh>
					<view class="threebtn" @click="addadminbtn">
						添加管理员
					</view>
				</view>
			</view>
		</view>
		<date-picker :show="showPicker" :type="type" class="mask" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onCancel"></date-picker>
	</view>
</template>

<script>
	import datePicker from "../../components/mx-datepicker.vue";
	import {
		formatDate
	} from '../../common/formatDate.js'
	// import { Dialog } from 'vant';
	export default {
		components: {
			datePicker
		},
		mounted() {

		},

		data() {
			return {
				imgList: [],
				cloudimgList: [],
				imgCount: 1, //最多支持3张上传，可以修改
				value: ['请选择开始时间', '请选择结束时间'],
				type: 'range', //时间选择器
				showPicker: false, //时间选择器
				activeNames: '',
				showlist: [],
				projectId: "",
				list: {}, //小区详情
				czlist: {}, //充值数据
				first: 0, //金额1
				second: 0, //金额2
				third: 0, //金额3
				fourth: 0, //金额4
				firstDiscount: 0, //赠送金额1
				secondDiscount: 0, //赠送金额2
				thirdDiscount: 0, //赠送金额3
				fourthDiscount: 0, //赠送金额4
				bindMoney: 0, //绑定赠送金
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数	
				sid: '',
				checked: false,
				spanUse: true
			}
		},
		onLoad(options) {
			this.projectId = options.projectId

		},
		onShow() {
			this.main()
			this.showlist = [];
			this.onRefresh();
		},
		methods: {
			//获取某一小区详情和总用户数等信息
			main() {
				let data = {
					projectId: this.projectId,
					needProjectMoney: 1,
					needProportion: 1
				}
				this.$base.request1('manager/project/statistics/', 'GET', data)
					.then(res => {
						if (res.data.code == 200) {
							this.list = res.data.data
							this.czlist = res.data.data.projectMoney

							this.first = this.czlist.first
							this.second = this.czlist.second
							this.third = this.czlist.third
							this.fourth = this.czlist.fourth
							this.firstDiscount = this.czlist.firstDiscount
							this.secondDiscount = this.czlist.secondDiscount
							this.thirdDiscount = this.czlist.thirdDiscount
							this.fourthDiscount = this.czlist.fourthDiscount
							this.bindMoney = this.czlist.bindMoney
							this.sid = this.czlist.id
							this.value[0] = this.czlist.startTime.substring(0, 10)
							this.value[1] = this.czlist.endTime.substring(0, 10)
							this.spanUse = !!this.czlist.spanUse
							if (this.list.longCharge == 0) {
								this.checked = false
							} else {
								this.checked = true
							}
						} else {
							uni.showToast({
								title: res.data.mag,
								duration: 2000,
								icon: "error"
							});
						}

					})
					.catch(err => {

					})

			},
			
			changeSpanUse(){
				this.spanUse = !this.spanUse
			},
			//提交修改
			glupbtn() {
				if (!this.first || !this.second || !this.third || !this.fourth || this.value[0] == "请选择开始时间" || this.value[
						1] == "请选择结束时间") {
					uni.showToast({
						title: '请完善信息',
						duration: 2000,
						icon: "error"
					});
					return
				}
				if (Number(this.first) < Number(this.firstDiscount) || Number(this.second) < Number(this.secondDiscount) ||
					Number(this.third) < Number(this.thirdDiscount) || Number(this.fourth) < Number(this.fourthDiscount)) {
					uni.showToast({
						title: '赠送金额不能大于充值金额',
						duration: 2000,
						icon: "error"
					});
					return
				}
				if (this.first < this.firstDiscount || this.second < this.secondDiscount || this.third < this
					.thirdDiscount || this.fourth < this.fourthDiscount) {
					uni.showToast({
						title: '赠送金额不能大于充值金额',
						duration: 2000,
						icon: "error"
					});
					return
				}
				let data = {
					projectId: this.projectId,
					first: this.first,
					second: this.second,
					third: this.third,
					fourth: this.fourth,
					firstDiscount: this.firstDiscount,
					secondDiscount: this.secondDiscount,
					thirdDiscount: this.thirdDiscount,
					fourthDiscount: this.fourthDiscount,
					startTime: this.value[0],
					endTime: this.value[1],
					bindMoney: this.bindMoney,
					id: this.sid,
					spanUse: this.spanUse ? 1 : 0
				}
				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				this.$base.request1('manager/project/customAmount', 'PUT', data)
					.then(res => {
						if (res.data.code == 200) {
							uni.hideLoading()
							uni.showToast({
								title: '设置成功',
								duration: 2000,
							});
						} else {
							uni.showModal({
								title: "提示",
								content: res.data.msg,
								confirmText: "确定",
								showCancel: false,
								success: (res) => {
									uni.hideLoading();
								}
							})
						}
					})
					.catch(err => {

					})
			},
			//获取某一小区的管理员列表分页
			loadMore() {
				if (this.refreshing) {
					this.showlist = [];
					this.refreshing = false;
				}
				const that = this;
				let data = {

					pageNum: that.pageNum,
					pageSize: that.pageSize

				}
				that.loading = true;
				that.$base.request1('manager/projectManager/list' + '/' + this.projectId, 'GET', data)
					.then(res => {
						that.loading = false;
						if (res.data.data && res.data.data.length > 0) {
							for (var i = 0; i < res.data.data.length; i++) {
								res.data.data[i].userId = that.pad(res.data.data[i].userId, 8)
							}
							that.showlist = that.showlist.concat(res.data.data);
							that.pageNum += 1;
						} else {
							that.finished = true;
						}
					})
					.catch(err => {

					})
			},
			onRefresh() {
				// 清空列表数据
				this.finished = false;
				this.pageNum = 1
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.loadMore();
			},

			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			//选择时间点击确定
			onSelected(e) { //选择

				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					for (var i = 0; i < e.value.length; i++) {
						e.value[i] = formatDate(new Date(e.value[i]), 'yyyy-MM-dd')
					}
					this.value = e.value;
				}

			},
			//选择时间点击取消
			onCancel() {
				this.showPicker = false;
				this.value = ['请选择开始时间', '请选择结束时间']
			},
			//点击时间框选择时间
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			cbtn() {},
			// 跳转预警设置
			yjbtn() {
				uni.navigateTo({
					url: '../early_warning_setting/early_warning_setting?projectId=' + this.projectId,
				});
			},
			// 跳转添加管理员
			addadminbtn() {
				uni.navigateTo({
					url: '../add_administrator/add_administrator?projectId=' + this.projectId + '&num=' + this.list
						.proportion,
				});
			},
			//跳转费率设置
			flbtn() {
				uni.navigateTo({
					url: '../rate_setting/rate_setting?projectId=' + this.projectId,
				});
			},
			//跳转修改小区信息
			modifybtn() {
				uni.navigateTo({
					url: '../modify_cell/modify_cell?projectId=' + this.projectId,
				});
			},
			pad(num, n) {
				var len = num.toString().length;
				while (len < n) {
					num = "0" + num;
					len++;
				}
				return num;
			},
			//修改管理员信息
			upbtn(item) {
				var id = item.id
				var name = item.userName
				var proportion = item.proportion
				var deviceSettings = item.deviceSettings
				var totalSetting = item.totalSetting
				var userSettings = item.userSettings
				uni.navigateTo({
					url: '../modify_administrator/modify_administrator?id=' + id + '&name=' + name +
						'&proportion=' + proportion + '&deviceSettings=' + deviceSettings +
						'&totalSetting=' + totalSetting + '&userSettings=' + userSettings + '&projectId=' + this
						.projectId + '&num=' + this.list.proportion
				});

			},
			//删除管理员
			dlbtn(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认删除？',
					success: function(res2) {
						if (res2.confirm) {
							var id = item.id
							that.$base.request1('manager/projectManager' + '/' + id, 'DELETE')
								.then(res => {
									if (res.data.code == 200) {
										that.main()
										that.showlist = [];
										that.onRefresh();
										uni.showToast({
											title: '删除成功',
											duration: 2000,
										});
									} else {
										uni.showToast({
											title: res.data.msg,
											duration: 2000,
											icon: "error"
										});
									}
								})
								.catch(err => {

								})
						} else if (res2.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},

			ccbtn() {
				let that = this;
				var value = that.checked;
				let txt = ''
				if (value == false) {
					txt = '开启'
				} else {
					txt = '关闭'
				}
				uni.showModal({
					title: '提示',
					content: '确认' + txt + '长充模式',
					success: function(res2) {
						if (res2.confirm) {
							that.$base.request1('manager/project/longCharge' + '/' + that.projectId, 'POST')
								.then(res => {
									if (res.data.code == 200) {
										uni.showToast({
											title: '操作成功',
											duration: 2000,
										});
										if (value == false) {
											that.checked = true
										} else {
											that.checked = false
										}
									} else {
										uni.showToast({
											title: res.data.msg,
											duration: 2000,
											icon: "error"
										});
									}
								})
								.catch(err => {

								})
						} else if (res2.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;

		.mask {
			position: fixed;
			z-index: 999;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.4);
		}

		.hand {
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;

			image {
				width: 22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}

		.sone {
			width: 100%;
			height: 310upx;
			border-radius: 0upx 0upx 16upx 16upx;
			background-color: #4B98ED;
			position: relative;
			margin-bottom: 110upx;

			.sonetxt {
				font-size: 36upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #ffffff;
				padding-left: 34upx;
				padding-top: 30upx;
				width: 90%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.sonefoot {
				width: 686upx;
				height: 304upx;
				background-color: #FFFFFF;
				border-radius: 16upx;
				box-shadow: 0upx 4upx 9upx 0upx rgba(44, 44, 44, 0.21);
				position: absolute;
				left: 32upx;
				top: 96upx;
				box-sizing: border-box;
				padding: 25upx 23upx;

				.sftxt {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					line-height: 45upx;
				}

				.sfbtn {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.sfbtnone {
						width: 180upx;
						height: 80upx;
						border-radius: 10upx;
						background-color: #4B98ED;
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						text-align: center;
						line-height: 80upx;
						color: #ffffff;
						margin-top: 10upx;
					}
				}
			}
		}

		.show {
			width: 100%;
			box-sizing: border-box;
			padding: 0 32rpx;

			.stwo {
				box-sizing: border-box;
				padding: 20upx 32upx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 16upx;
				box-shadow: 4upx 4upx 9upx 4upx rgba(44, 44, 44, 0.21);

				.cdjl-0 {
					display: flex;
					height: 100upx;
					background: #fff;
					align-items: center;
					justify-content: space-around;

					.cdjl-0-l {
						height: 60upx;
						width: 260upx;
						border-radius: 10upx;
						border: 2upx solid #ccc;
						font-size: 30upx;
						line-height: 60upx;
						color: #bbbbbb;
						text-align: center;
					}

					.cdjl-0-r {
						width: 120upx;
						height: 60upx;
						font-size: 20upx;
						background: #4e9ff6;
						color: #fff;
						line-height: 60upx;
						text-align: center;
						border-radius: 10upx;
					}
				}

				.stwohand {
					font-size: 32upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #333333;

				}

				.stwofoot {
					.sftap {
						width: 100%;
						box-sizing: border-box;
						padding: 0 100upx;
						display: flex;
						justify-content: space-between;
						margin-top: 27upx;

						.sftapleft {
							display: flex;
							align-items: center;
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #333333;

							input {
								width: 121upx;
								border-bottom: 1upx solid #dddddd;
								font-size: 24upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								text-align: center;
								color: #4b98ed;
								margin: 0 10upx;
							}
						}
					}

					.sfdibu {
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						padding-right: 100upx;
						margin-top: 36upx;

						input {
							width: 121upx;
							margin: 0 10upx;
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							text-align: center;
							border-bottom: 1upx solid #dadada;
							color: #ed4be3;
						}
					}

					.sfbtn {
						width: 540upx;
						height: 88upx;
						border-radius: 10upx;
						box-shadow: 0upx 4upx 9upx 0upx rgba(19, 103, 197, 0.6);
						text-align: center;
						line-height: 88upx;
						font-size: 32upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #ffffff;
						background-color: #4B98ED;
						margin: 34upx auto;
					}

					.stwomap {
						line-height: 45upx;

						.stwomaphand {
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #333333;
						}

						.stwomaptxt {
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #666666
						}
					}
				}
			}

			.sthree {
				width: 100%;
				box-sizing: border-box;
				margin: 27upx 0;
				padding: 20upx 0upx;
				background-color: #FFFFFF;
				border-radius: 16upx;
				box-shadow: 4upx 4upx 9upx 4upx rgba(44, 44, 44, 0.21);

				.sthreehand {
					font-size: 32upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #333333;
					margin-left: 31upx;
				}

				.sthreez {
					display: flex;
					justify-content: space-between;
					width: 100%;
					box-sizing: border-box;
					padding: 45upx 51upx 48upx 106upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
				}

				.sthreemap {

					/deep/.van-list {
						// height: 600upx;
						// display: block;
						// overflow-y: visible;
					}

					/deep/.van-cell {
						padding: 19.5upx 0;
					}

					/deep/.van-cell__right-icon {
						display: none;
					}

					.tree {
						width: 100%;
						display: flex;
						align-items: center;

						.treeone {
							width: 7%;
							text-align: right;

							image {
								width: 20upx;
								height: 20upx;
							}
						}

						.treeone1 {
							width: 7%;
							text-align: right;

							image {
								width: 20upx;
								height: 4upx;
							}
						}

						.treetwo {
							width: 25%;
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							text-align: center;
							color: #333333;
						}

						.treethree {
							width: 22%;
							font-size: 28upx;
							font-family: Arial Regular, Arial Regular-Regular;
							font-weight: 400;
							text-align: center;
							color: #333333;
						}

						.treefour {
							width: 24%;
							text-align: center;

							image {
								width: 44upx;
								height: 43upx;
							}
						}

						.treefive {
							width: 22%;
							text-align: center;

							image {
								width: 48upx;
								height: 42upx;
							}
						}

					}

					.sthreeshow {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.mont {
							width: 120upx;
							height: 120upx;
							border-radius: 10upx;
							box-shadow: -1upx 5upx 9upx 0upx rgba(22, 22, 22, 0.2);
							font-size: 24upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							text-align: center;
							line-height: 120upx;
							color: #333333;
							position: relative;

							.monttap {
								width: 14upx;
								height: 14upx;
								background-color: #4B98ED;
								border-radius: 50%;
								position: absolute;
								top: 9upx;
								right: 9upx;
							}

							.monttap1 {
								width: 14upx;
								height: 14upx;
								border-radius: 50%;
								position: absolute;
								top: 9upx;
								right: 9upx;
								border: 2upx solid #999999;
							}

						}
					}

					.threebtn {
						width: 540upx;
						height: 88upx;
						border-radius: 10upx;
						box-shadow: 0upx 4upx 9upx 0upx rgba(19, 103, 197, 0.6);
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						line-height: 88upx;
						margin: 49upx auto;
						color: #ffffff;
						background-color: #4B98ED;
					}
				}
			}

			.sfour {
				width: 100%;
				box-sizing: border-box;
				margin: 27upx 0;
				padding: 20upx 32upx;
				background-color: #FFFFFF;
				border-radius: 16upx;
				box-shadow: 4upx 4upx 9upx 4upx rgba(44, 44, 44, 0.21);

				.sfourhand {
					font-size: 32upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #333333;
				}

				.sfourmap {
					line-height: 45upx;

					.sfourmaphand {
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
					}

					.sfourmaptxt {
						padding-left: 32upx;
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #666;
					}
				}

				.sfant {
					margin: 30upx 0;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding-left: 32upx;
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #333333;
				}

				// /deep/.van-switch{
				// 	border: 1px solid rgba(0,0,0,.1);
				// }
			}
		}

	}
</style>